<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>权限框架</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <!--[if lt IE 9]>
    <script src="/js/html5.js"></script>
    <![endif]-->
    <script src="/js/jquery.js"></script>
    <script src="/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="text/javascript" src="/js/userAd.js"></script>
    <script>
        $(function () {
            var tmp = /([a-zA-Z0-9]{1,18})/;
            $("#userCode").focus(function () {
                if ($(this).val() === '请输入用户编码')
                    $(this).val("");
                $(this).css("color", "#333333");
            }).blur(function () {
                if ($(this).val() === "") {
                    $("#userCodeInfo").html("用户编码不能为空");
                } else if ($(this).val() !== "") {
                    if (!tmp.test($(this).val())) {
                        $("#userCodeInfo").html("用户编码不合法");
                    }else{
                        $("#userCodeInfo").html("");
                    }
                }

            });

            $("#address").focus(function () {
                if ($(this).val() === '请输入地址')
                    $(this).val("");
            });

            $("#userName").focus(function () {
                if ($(this).val() === '请输入用户名')
                    $(this).val("");
            }).blur(function () {
                if ($(this).val() === "") {
                    $("#userNameInfo").html("用户名不能为空");
                } else if ($(this).val() !== "") {
                    // if ($("#contents").html() ==="用户名不能为空"){
                        $("#userNameInfo").html("");
                    // }
                }
            });
            //注册手机号
            $("#phone").focus(function () {
                if ($(this).val() === '请输入手机号')
                    $(this).val("");
                $(this).css("color", "#333333");
            }).blur(function () {
                if ($(this).val() === "") {
                    $("#phoneInfo").html("请输入手机号");
                } else if ($(this).val() !== "") {
                    if (!$(this).val().match(/(^1[0-9]{10}$)/)) {
                        $("#phoneInfo").html("手机号格式不正确");
                    } else if ($(this).val() !== "") {
                        $("#phoneInfo").html("");

                    }
                }
            });

        })
    </script>
    <script>
        function check () {
            var userCodeInfo =$("#userCodeInfo").html();
            var userNameInfo=$("#userNameInfo").html();
            var phoneInfo=$("#phoneInfo").html()
            if (userCodeInfo!=="" || userNameInfo !=="" || phoneInfo!==""){
                alert("添加失败！请检查用户信息")
                return false;
            }else{
                return true;
            }
        }
    </script>
</head>
<body>
<div th:replace="head::header"></div>
<div class="rt_content">
    <div class="rt_content">
        <div class="page_title">
            <h2 class="fl">添加用户</h2>
        </div>
    </div>
    <div class="providerAdd">
        <span style="color:red;margin-bottom: 20px;margin-left: 250px;" th:text="${message}"></span>
        <form id="userForm" name="userForm" method="post" class="container container-small" th:action="@{/user/add_user(createBy=${session.userinfo.id})}" onsubmit="return check();">
            <input type="hidden" name="method" value="add">
            <!--div的class 为error是验证错误，ok是验证成功-->
            <div class="form-group">
                <label for="userCode">用户编码：</label>
                <a style="color: red">*</a>
                <input type="text" name="userCode" id="userCode" value="请输入用户编码"><span style="color: red" id="userCodeInfo"></span>
                <!-- 放置提示信息 -->
                <font color="red"></font>
            </div >
            <div class="form-group">
                <label for="userName">用户名称：</label>
                <a style="color: red">*</a>
                <input type="text" name="userName" id="userName" value="请输入用户名"><span style="color: red" id="userNameInfo"></span>
                <font color="red"></font>
            </div>
            <div class="form-group">
                <label >用户性别：</label>
                <a>&nbsp;&nbsp;</a>
                <select name="gender" id="gender">
                    <option value="1" selected="selected">男</option>
                    <option value="2">女</option>
                </select>
            </div>
            <div class="form-group">
                <label for="birthday">出生日期：</label>
                <a>&nbsp;&nbsp;</a>
                <input type="date"  id="birthday" name="birthday" value="2021/9/16">
                <font color="red"></font>
            </div>
            <div class="form-group">
                <label for="phone">用户电话：</label>
                <a style="color: red">*</a>
                <input type="text" name="phone" id="phone" value="请输入手机号"><span style="color: red" id="phoneInfo"></span>
                <font color="red"></font>
            </div>
            <div class="form-group">
                <label for="address">用户地址：</label>
                <a>&nbsp;&nbsp;</a>
                <input name="address" id="address"  value="请输入地址">
            </div>
            <div class="form-group">
                <label >用户角色：</label>
                <a style="color: red">*</a>
                <!-- 列出所有的角色分类 -->
                <!-- <select name="userRole" id="userRole"></select> -->
                <select name="userRole" id="userRole">
                    <span th:each="role : ${roles}">
                         <option th:value="${role.id}" th:text="${role.roleName}"></option>
                    </span>
                </select>
                <font color="red"></font>
            </div>
            <div class="providerAddBtn">
                <button type="submit" class="btn btn-primary" name="button_id" id="button_id"><a  class="btn btn-default">保存</a></button>
                <button><a type="button" class="btn btn-default" data-dismiss="modal" th:href="@{/toIndex}">返回</a></button>
            </div>
        </form>
    </div>
</div>
</section>
</body>
</html>